<template>
<div>
  <h1>index page</h1>
  <ul>
    <li>
      <NuxtLink to="/user">路由跳转： /user</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/user/1">路由跳转： /user/1</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/about?id=123">路由跳转： /about?id=123</NuxtLink>
    </li>
    <li>
      navigateTo方法跳转： <button @click="goto">跳转 /bout?id=哈哈</button>
    </li>
    <li>
      <NuxtLink to="/globalcss">全局css</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/img">静态图片： /img</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/head">修改head信息： /head</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/layout">嵌套布局： /layout</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/plugins">插件: /plugins</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/useFetch">/useFetch</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/components">组件： /components</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/naive">引入第三方ui库： /naive</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/vuekinesisTest">引入第三方库： /vue-kinesis</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/errorTest">全局错误页面： /errorTest</NuxtLink>
    </li>
  </ul>

</div>
</template>

<script setup>
const goto = ()=>{
  navigateTo({
    path: '/about',
    query: {
      id: '哈哈',
    }
  })
}
</script>

<style scoped>

</style>
